<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info wordHeader">
      <table style="height: 200px">
        <tr>
          <td class="td1">
            <div>{{ wordHeader.reportHeaderSettings }}</div>
          </td>
          <td class="td2">
            <div style="display: flex; align-items: center">
              <div style="width: 100px; float: left">
                {{ wordHeader.headerIcon }}
              </div>
              <div style="float: left">
                <BaseUpload
                  v-if="isShow"
                  key="BaseUpload"
                  ref="BaseUpload"
                  v-model="formData.filePath"
                  business-type="160"
                  :file-size="1024"
                  :show-tip-text="false"
                />
                <div style="margin-top: -35px; text-align: center">
                  <el-link type="danger" @click="del">{{
                    operateType.delete
                  }}</el-link>
                </div>
              </div>
              <div style="width: 100px; float: left; margin-left: 30px">
                {{ wordHeader.headerTitle }}
              </div>
              <div style="float: left">
                <el-input
                  v-model="formData.title"
                  type="textarea"
                  :rows="4"
                  :placeholder="wordHeader.enterContent"
                  style="width: 500px"
                >
                </el-input>
              </div>
            </div>
          </td>
          <td class="td3">
            <el-button type="primary" @click="submitFun">{{
              operateType.save
            }}</el-button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import {
  create,
  update,
  getList,
} from "../../../api/SysBusiness/SysBusinessImgWarehouse.js";
export default {
  name: "WordHeader",
  components: {},
  data() {
    return {
      visible: false,
      isShow: true,
      formData: {
        title: "",
        filepath: "",
        sysBusinessImgWarehouseList: [],
      },
      editdata: {},
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    wordHeader() {
      return this.$t("WordHeader") || {};
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getList({ fileTpyeCode: "3" })
        .then((res) => {
          if (res.data.total === 0) {
            this.formData.id = 0;
          } else {
            var obj = res.data.dataList[0];
            this.formData.id = obj.id;
            this.formData.title = obj.originalFileName;
            this.formData.filePath = obj.filePath;
            this.editdata = obj;
          }
        })
        .catch((res) => {});
    },
    del() {
      this.formData.filePath = "";
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
    submitFun() {
      debugger;
      var obj = {};
      obj.foreignKeyId = 0;
      obj.fileTpyeCode = 3;
      obj.originalFileName = this.formData.title;
      obj.storageFileName = this.formData.filePath;
      obj.filePath = this.formData.filePath;
      if (this.formData.id === 0) {
        create(obj)
          .then((res) => {})
          .catch((res) => {});
      } else {
        obj.id = this.formData.id;
        update(obj)
          .then((res) => {})
          .catch((res) => {});
      }
    },
  },
};
</script>
<style  lang="scss">
.wordHeader {
  .td1 {
    border: 1px solid rgb(183, 178, 178); /* 设置边框为1像素宽的实线黑色 */
    div {
      text-align: center;
      font-weight: 700;
      font-size: medium;
    }
  }
  .td2 {
    border-top: 1px solid rgb(183, 178, 178); /* 设置边框为1像素宽的实线黑色 */
    border-bottom: 1px solid rgb(183, 178, 178); /* 设置边框为1像素宽的实线黑色 */
    div {
    }
  }
  .td3 {
    border: 1px solid rgb(183, 178, 178); /* 设置边框为1像素宽的实线黑色 */
    text-align: center;
  }
}
</style>
